<!DOCTYPE HTML>
<head>
	<meta charset="utf-8"/>
	<title>伪元素笔记</title>

<!--
伪元素：表示页面中一些特殊的并不真实存在的元素（特殊的位置）
       伪元素使用 :: 开头
	   ::first-letter 表示第一个字母
	   ::first-line 表示第一行
	   ::selection 表示选中的内容
	   ::before元素的开头
	   ::after元素的最后
	     - before喝after必须结合content使用 -
-->
<style>
	p::first-letter{font-size: 50px;}
	/* 段落中首字母变大，下沉效果 */
	p::first-line{background-color: #FFFF00;}
	/* 第一行添加黄色背景颜色 */
	p::selection{background-color: #00FFFF;}
	/* 选中的内容添加蓝色背景 */
	
	div::before{content:'加在最开头';color: #0000FF;}
	div::after{content:'加在最后面';color:red;}
</style>	
</head>
<body>
	<div>before和after的使用</div>
	
</body>